<template>
  <view>
    <u-navbar title="请假" autoBack fixed placeholder></u-navbar>
    <view class="content">
      <z-paging ref="paging" fixed use-safe-area-placeholder refresher-vibrate refresher-background="#f5f5f5"
			@query="onRefresh" safe-area-inset-bottom show-refresher-when-reload refresher-only show-refresher-update-time
      loading-more-enabled to-bottom-loading-more-enabled  @scroll="onScroll"
      style="top: calc(44px + var(--status-bar-height));">
        <view style="height: 10px;"></view>
        <view v-if="dataList.length != 0">
          <u-cell v-for="item in dataList" :key="item.id" :title="`假条-${item.type}-${item.day}天`"
          :label="`当前节点：${item.flowLabel}`" isLink @click="goDetail(item)"></u-cell>
        </view>
        <u-empty v-else mode="list" :marginTop="50" text="暂无请假记录"></u-empty>
        <u-loadmore v-if="dataList.length != 0" :marginTop="20" line :status="loadMore" nomore-text="到底了"></u-loadmore>
        <view style="height: 75px;"></view>
      </z-paging>
      <view class="bottom-btn" @click="addLeave()">
        <image
        src="/static/tab1/icon_plus.png"
        mode="scaleToFill"
        />
        请假
      </view>
    </view>

    <c-loading></c-loading>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  getLeaveList
} from '@/api/leave'
import mixin from '@/mixin'
export default {
  data() {
    return {
    }
  },
  mixins: [mixin],
  computed: {
    ...mapGetters(['id'])
  },
  created() {
    this.getDataList(false)
  },
  methods: {
    getDataList(isRefresh) {
      const params = {
        uid: this.id,
        current: this.current,
        size: 20
      }
      getLeaveList(params).then(res => {
        const { code, data } = res
        if(code === 200) {
          this.total = data.total
          if(isRefresh) {
            this.dataList = []
          }
          data.list.forEach(item => {
            this.dataList.push(item)
          })
        }
        this.$refs.paging.complete()
      })
    },
    goDetail(item) {
      uni.navigateTo({
        url: `/pages/menus/leave/detail?id=${item.id}`
      })
    },
    addLeave() {
      uni.navigateTo({
        url: '/pages/menus/leave/add'
      })
    }
  },
  onShow() {
    if(this.$store.addSuccess) {
      this.getList(false)
      this.$store.addSuccess = false
    }
  }
} 
</script>

<style scoped lang="scss">
.content {

  .body {
    height: calc(100vh - var(--status-bar-height) - 44px - 60px);
    margin-bottom: 20px;
  }
}
.bottom-btn {
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 60px;
  background-color: #ffffff;
  border-top: 1px solid #eeeeee;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 550;

  image {
      width: 24px;
      height: 24px;
  }
}
</style>